<template>
  <ul class="category-list clearfix">
    <li v-for="(productCategory, index) in productCategories" class="category-item">
      <!-- 已经开通 -->
      <router-link v-if="productCategory.state === 1" to="/idle-clothes">
        <div v-if="!productCategory.icon" class="icon-cont">
          <img v-if="index === 0" src="./images/fenlei1.png" alt="">
          <img v-else-if="index === 1" src="./images/fenlei2.png" alt="">
          <img v-else-if="index === 2" src="./images/fenlei3.png" alt="">
          <img v-else-if="index === 3" src="./images/fenlei4.png" alt="">
        </div>
        <span>{{ productCategory.cate_name }}</span>
      </router-link>

      <!-- 即将开通 -->
      <div class="not-open" v-else>
        <div v-if="!productCategory.icon" class="icon-cont">
          <img v-if="index === 0" src="./images/fenlei1.png" alt="">
          <img v-else-if="index === 1" src="./images/fenlei2.png" alt="">
          <img v-else-if="index === 2" src="./images/fenlei3.png" alt="">
          <img v-else-if="index === 3" src="./images/fenlei4.png" alt="">
        </div>
        <span>{{ productCategory.cate_name }}</span>
      </div>
    </li>
  </ul>
</template>

<script>
  import { productCate } from '../../service/getDate'

  export default {
    name: 'recycle-category',
    data () {
      return {
        productCategories: []
      }
    },
    props: {},
    components: {},
    mounted () {
      productCate().then(res => {
        if (res.code === 0) {
          this.productCategories = res.info
        }
      })
    },
    watch: {},
    computed: {},
    filters: {},
    methods: {}
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/config";
  .category-list {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 65px;
    font-size: 0;

    .category-item {
      display: inline-block;
      /*float: left;*/
      width: 25%;
      text-align: center;
      font-size: 13px;

      a {
        display: block;
      }

      .icon-cont {
        position: relative;
        margin: 0 auto 4px;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        overflow: hidden;

        img {
          width: 100%;
          max-width: 100%;
        }
      }

      // 即将开通
      .not-open {
        .icon-cont {
          &:before {
            content: '即将开启';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 50%;
            padding: 9px 10px;
            font-size: 12px;
            line-height: 1.2;
            color: $white;
            white-space: pre-wrap;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
          }
        }
      }
    }
  }
</style>
